<template>
  <div class="emoji-container">
    <div class="emoji-panel">
      <div class="emoji-grid">
        <div 
          v-for="{ char, name } in emojiList"
          :key="char"
          class="emoji-item"
          @mousemove="handleEmojiHover(char, $event)"
          @mouseenter="showTooltip(name)"
          @mouseleave="hideTooltip"
        >
          <button 
            class="emoji-char"
            @click="handleSelect(char)"
          >
            {{ char }}
          </button>
        </div>
      </div>
      <div 
        v-if="currentTooltip" 
        class="emoji-tooltip"
        :style="{
          top: `${tooltipPosition.y}px`,
          left: `${tooltipPosition.x}px`,
          display: isTooltipVisible ? 'block' : 'none'
        }"
      >
        {{ currentTooltip }}
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, nextTick } from 'vue';

export default defineComponent({
  name: 'chat-input-emoji',
  emits: ['select'],
  setup(_, { emit }) {
    const emojiList = [
      { char: '😀', name: '大笑' },
      { char: '😁', name: '露齿笑' },
      { char: '😂', name: '笑哭' },
      { char: '🤣', name: '笑到打滚' },
      { char: '😃', name: '开心' },
      { char: '😄', name: '微笑' },
      { char: '😅', name: '流汗笑' },
      { char: '😆', name: '眯眼笑' },
      { char: '😉', name: '眨眼' },
      { char: '😊', name: '微笑' },
      { char: '😋', name: '调皮' },
      { char: '😎', name: '墨镜' },
      { char: '😍', name: '爱心眼' },
      { char: '😘', name: '飞吻' },
      { char: '🥰', name: '爱心脸' },
      { char: '😗', name: '亲吻' },
      { char: '🤩', name: '星星眼' },
      { char: '🤔', name: '思考' },
      { char: '😐', name: '无语' },
      { char: '😑', name: '冷漠' },
      { char: '😶', name: '沉默' },
      { char: '🙄', name: '白眼' },
      { char: '😏', name: '得意' },
      { char: '😣', name: '痛苦' },
      { char: '😥', name: '失望' },
      { char: '😮', name: '惊讶' },
      { char: '🤐', name: '闭嘴' },
      { char: '😯', name: '哦' },
      { char: '😪', name: '困' },
      { char: '😫', name: '累' },
      { char: '🥱', name: '哈欠' },
      { char: '😴', name: '睡着' },
      { char: '😌', name: '轻松' },
      { char: '😛', name: '吐舌' },
      { char: '😜', name: '单眼吐舌' },
      { char: '🤪', name: '鬼脸' },
      { char: '😝', name: '眯眼吐舌' },
      { char: '🤑', name: '钱脸' },
      { char: '🤗', name: '拥抱' },
      { char: '🤭', name: '偷笑' },
      { char: '🤫', name: '嘘' },
      { char: '🤥', name: '说谎' },
      { char: '😈', name: '恶魔笑' },
      { char: '👿', name: '恶魔' },
      { char: '👻', name: '幽灵' },
      { char: '💀', name: '骷髅' },
      { char: '☠️', name: '骷髅旗' },
      { char: '🤡', name: '小丑' },
      { char: '👽', name: '外星人' },
      { char: '👾', name: '外星怪物' },
      { char: '🤖', name: '机器人' },
      { char: '🎃', name: '南瓜灯' },
      { char: '❤️', name: '红心' },
      { char: '🧡', name: '橙心' },
      { char: '💛', name: '黄心' },
      { char: '💚', name: '绿心' },
      { char: '💙', name: '蓝心' },
      { char: '💜', name: '紫心' },
      { char: '🖤', name: '黑心' },
      { char: '🤍', name: '白心' },
      { char: '👍', name: '赞' },
      { char: '👎', name: '踩' },
      { char: '👌', name: 'OK' },
      { char: '✌️', name: '胜利' },
      { char: '🤞', name: '手指交叉' },
      { char: '🤟', name: '我爱你' },
      { char: '🤘', name: '摇滚' },
      { char: '👋', name: '挥手' },
      { char: '🐶', name: '狗' },
      { char: '🐱', name: '猫' },
      { char: '🐭', name: '老鼠' },
      { char: '🐹', name: '仓鼠' },
      { char: '🐰', name: '兔子' },
      { char: '🦊', name: '狐狸' },
      { char: '🐻', name: '熊' },
      { char: '🐼', name: '熊猫' },
      { char: '🍎', name: '苹果' },
      { char: '🍐', name: '梨' },
      { char: '🍊', name: '橙子' },
      { char: '🍋', name: '柠檬' },
      { char: '🍌', name: '香蕉' },
      { char: '🍉', name: '西瓜' },
      { char: '🍇', name: '葡萄' },
      { char: '🍓', name: '草莓' },
      { char: '😺', name: '笑猫' },
      { char: '😸', name: '眯眼笑猫' },
      { char: '😹', name: '笑哭猫' },
      { char: '😻', name: '爱心眼猫' },
      { char: '😼', name: '狡猾猫' },
      { char: '😽', name: '亲亲猫' },
      { char: '🙀', name: '惊吓猫' },
      { char: '😿', name: '哭泣猫' },
      { char: '😾', name: '生气猫' },
      { char: '🦁', name: '狮子' },
      { char: '🐯', name: '老虎' },
      { char: '🦒', name: '长颈鹿' },
      { char: '🐨', name: '考拉' },
      { char: '🐧', name: '企鹅' },
      { char: '🦉', name: '猫头鹰' },
      { char: '🦄', name: '独角兽' },
      { char: '🐙', name: '章鱼' },
      { char: '🦑', name: '乌贼' },
      { char: '🦀', name: '螃蟹' },
      { char: '🦐', name: '虾' },
      { char: '🦞', name: '龙虾' },
      { char: '🦪', name: '牡蛎' },
      { char: '🍕', name: '披萨' },
      { char: '🍔', name: '汉堡' },
      { char: '🍟', name: '薯条' },
      { char: '🌭', name: '热狗' },
      { char: '🥪', name: '三明治' },
      { char: '🌮', name: '玉米饼' },
      { char: '🌯', name: '卷饼' },
      { char: '🥗', name: '沙拉' },
      { char: '🍣', name: '寿司' },
      { char: '🍤', name: '炸虾' },
      { char: '🍦', name: '冰淇淋' },
      { char: '🍩', name: '甜甜圈' },
      { char: '🍪', name: '饼干' },
      { char: '🎂', name: '蛋糕' },
      { char: '🍰', name: '小蛋糕' },
      { char: '🧁', name: '纸杯蛋糕' }
    ];

    const currentTooltip = ref('');
    const tooltipPosition = ref({ x: 0, y: 0 });
    const isTooltipVisible = ref(false);
    const hoveredEmoji = ref('');

    const showTooltip = (name: string) => {
      currentTooltip.value = name;
      nextTick(() => {
        // console.log('Tooltip should be visible now');
      });
    };

    const hideTooltip = () => {
      currentTooltip.value = '';
    };

    // 鼠标移入表情时，显示表情提示
    const handleEmojiHover = (emoji: string, event: MouseEvent) => {
      hoveredEmoji.value = emoji;
      isTooltipVisible.value = true;
      tooltipPosition.value = {
        x: event.clientX + 35, // 向右偏移35px
        y: event.clientY + 30  // 向下偏移30px
      };
    };

    const handleEmojiLeave = () => {
      isTooltipVisible.value = false;
    };

    const handleSelect = (emoji: string) => {
      emit('select', emoji);
    };

    return {
      emojiList,
      currentTooltip,
      tooltipPosition,
      isTooltipVisible,
      hoveredEmoji,
      showTooltip,
      hideTooltip,
      handleEmojiHover,
      handleEmojiLeave,
      handleSelect
    };
  }
});
</script>

<style scoped>
.emoji-container {
  position: relative;
  display: inline-block;
}

.emoji-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  z-index: 1000;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  padding: 12px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 420px;
  min-width: 420px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
  border: 1px solid #eee;
  overscroll-behavior: contain;
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 4px;
  width: 100%;
}

.emoji-item {
  width: 40px;
  height: 40px;
  padding: 8px;
  min-width: 0;
  box-sizing: border-box;
  transition: all 0.2s ease;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.emoji-item:hover {
  background: #f0f0f0;
  transform: scale(1.1);
  border-radius: 8px;
}

.emoji-char {
  font-size: 1.8em;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  transition: transform 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.emoji-name {
  display: none;
}

.category,
.category-title {
  display: none;
}

/* Chrome/Safari滚动条样式 */
.emoji-panel::-webkit-scrollbar {
  width: 6px;
  height: 0;
}

.emoji-panel::-webkit-scrollbar-track {
  background: transparent;
}

.emoji-panel::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
  transition: background 0.2s;
}

.emoji-panel::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

/* 添加工具提示样式 */
.emoji-tooltip {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 10000;
  pointer-events: none;
  white-space: nowrap;
  transform: translate(-50%, -100%);
}
</style>
